<script setup>
import { getUserCenter } from '@/api/my';
import { jump } from '@/utils/tool';
// import AdverTisement from '@/components/Advertisement.vue';

//页面初始数据
const state = reactive({
  id: '',
  nickName: '',
  avatar: ''
});
const bottomHeight = ref(640); // 默认广告组件底部高度
const wallet = () => jump('/pages/wallet/wallet');
const Order = () => jump('/pages/order/order');
const help = () => jump('/pages/customer/customer');
const copon = () => jump('/pages/coupon/coupon');

const initData = async () => {
  if (state.id) return;
  try {
    const res = await getUserCenter();
    const userInfo = res.data.user;
    state.id = userInfo.id;
    state.nickName = userInfo.nickName;
    state.avatar = userInfo.avatar;
  } catch (err) {
    console.error('获取用户中心信息失败:', err);
  }
};

onMounted(() => {
  initData();
});
//按钮数据
const buttons = [
  { id: 0, icon: '/static/images/icon_wallet.png', text: '我的钱包', png: '/static/images/icon_arrow.png' },
  { id: 1, icon: '/static/images/home_order.png', text: '我的订单', png: '/static/images/icon_arrow.png' },
  { id: 2, icon: '/static/images/icon_problem.png', text: '在线客服', png: '/static/images/icon_arrow.png' },
  { id: 3, icon: '/static/images/icon_coupon.png', text: '我的优惠卷', png: '/static/images/icon_arrow.png' },
  { id: 4, link: '/pages/privacy/privacy' }
];

//跳转
const navigate = (link) => {
  console.log(navigate);
  uni.navigateTo({
    url: link,
    fail: (err) => {
      console.error(`导航失败：${err.errMsg}`);
    }
  });
};
//广告高度
const adContainerHeight = ref('800rpx');
</script>

<template>
  <view class="my">
    <view class="nav_container">
      <view class="nav_item">
        <img src="@/static/images/home_my.png" class="nav_icon" />
        <text class="nav_text">{{ state.id }}</text>
      </view>
    </view>
    <view class="nav_container">
      <view class="nav_item" style="border-radius: 16rpx 16rpx 0rpx 0rpx" @click="wallet">
        <img :src="buttons[0].icon" class="nav_icon" style="width: 46rpx; height: 46rpx" />
        <text class="nav_text">{{ buttons[0].text }}</text>
        <view class="nav_active">
          <img :src="buttons[0].png" class="nav_icon_png" style="width: 46rpx; height: 46rpx" />
        </view>
      </view>
      <view class="nav_item" @click="Order">
        <img :src="buttons[1].icon" class="nav_icon" style="padding-right: 46rpx" />
        <text class="nav_text">{{ buttons[1].text }}</text>
        <view class="nav_active">
          <img :src="buttons[0].png" class="nav_icon_png" />
        </view>
      </view>
      <view class="nav_item" @click="help">
        <img :src="buttons[2].icon" class="nav_icon" style="padding-right: 46rpx" />
        <text class="nav_text">{{ buttons[2].text }}</text>
        <view class="nav_active">
          <img :src="buttons[0].png" class="nav_icon_png" />
        </view>
      </view>
      <view class="nav_item" style="border-radius: 0rpx 0rpx 16rpx 16rpx" @click="copon">
        <img :src="buttons[3].icon" class="nav_icon" />
        <text class="nav_text">{{ buttons[3].text }}</text>
        <view class="nav_active">
          <img :src="buttons[0].png" class="nav_icon_png" />
        </view>
      </view>
    </view>
    <!-- #ifdef MP-WEIXIN  -->
    <!-- <AdverTisement :bottomHeight="bottomHeight" /> -->
    <!-- #endif -->
    <view class="privacy_info" @click="navigate(buttons[4].link)">《隐私协议》 |&nbsp; 版本号: 1.86</view>
  </view>
</template>

<style lang="scss" scoped>
.my {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #ececec;

  .nav_container {
    display: flex;
    flex-direction: column;
    padding: 0 30rpx;
    margin-top: 40rpx;

    .nav_item {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100rpx;
      line-height: 100rpx;
      background-color: #ffffff;
      box-sizing: border-box;

      &:not(:last-child) {
        border-bottom: 1px solid #ddd;
      }

      .nav_icon {
        padding: 0 44rpx 0 40rpx;
        width: 40rpx;
        height: 40rpx;
      }
      .nav_active {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        padding-right: 30rpx;
        .nav_icon_png {
          width: 46rpx;
          height: 46rpx;
        }
      }

      .nav_text {
        font-size: 36rpx;
      }
    }
  }

  .privacy_info {
    font-size: 30rpx;
    color: #37a0fb;
    text-align: center;
    margin: auto 0 60rpx;
  }
}
</style>
